<template>
  <div class="businessContainer">
    <bcb_220>
      <div class="businessMain">
        <div class="businessHeader">{{ msg.title }}</div>
        <div class="businessLine">
          <line_a :title="msg.enSubTitle" color="#FFFFFF" font-size="19px" />
        </div>
        <div class="businessBtns">
          <btn_radio_c
            class="businessCallBtns1"
            :options="params"
            check-color="#FFFFFF"
            font-size="18px"
            no-check-color="#ffffff80"
          />
          <btn_a
            :title="i18nt.buttons.more2"
            color="#FFFFFF"
            font-size="18px"
          />
        </div>
        <div class="businessCards"><cards /></div>
      </div>
    </bcb_220>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import line_a from "@/components/line/line_a.vue";
import btn_radio_c from "@/components/buttons/btn_radio_c.vue";
import btn_a from "@/components/buttons/btn_a.vue";
import cards from "./sub/bssgp.vue";

const msg = i18nt.value.business;

const params = [
  { value: "a", title: msg.btn1 },
  { value: "b", title: msg.btn2 },
];
</script>

<style scoped lang="scss">
.businessContainer {
  @include rel_cen_hw;
  background-image: url("@/assets/png/bga.png");
  background-size: cover;
  background-position: center;
}

.businessMain {
  @include relative_hw;

  flex-direction: column;
  align-items: center;

  .businessHeader {
    @include rel_cen_hw(48px, 136px);
    font-family: "Songti SC", "Songti SC";
    font-weight: 900;
    font-size: 34px;
    color: #ffffff;
    margin-top: 51px;
  }

  .businessLine {
    @include relative_hw(26px, 100%);
    margin-top: 6px;
  }

  .businessBtns {
    @include relative_hw(25px, 100%);
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-top: 22px;

    .businessCallBtns1 {
      width: 204px;
      margin-right: 30px;
    }
  }

  .businessCards {
    @include rel_cen_hw(407px, 100%);
    margin-top: 22px;
  }
}
</style>
